El resumen de entradas en las etiquetas lo que hace es mostrar el título de todas las entradas con una misma etiqueta con la opción de desplegar la entrada. Sigue teniendo gran aceptación porque resulta cómodo a la hora de buscar algo y no carga la página cada vez que deseamos mostrar la entrada completa.
El inconveniente era que los títulos se mostraban con los mismos estilos de post h3 y en algunos casos donde la fuente es grande o contiene una imagen no resultaba nada estético.
Así que, a las preguntas sobre la forma de modificar la fuente de los títulos la respuesta es la siguiente.
Lo primero que añadimos es el script, luego debemos añadir las parte de código que hay en color rojo justo sobre la de color negro.La primera parte que añadimos en color rojo es la siguiente:
<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr><td width='40px'>
<a expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Desplegar esta entrada'>[+/-]</a></td>
<td><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3></td></tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>
</b:includable>
Lo que está marcado en negrita lo vamos a sustituir por:
<table cellpadding='0' cellspacing='0' class='resumenpost'><tr><td width='40px'>
El siguiente paso es mirar en vista previa, no veremos los cambios porque se visualizan cuando marcamos sobre una etiqueta pero podemos ver si los cambios pueden guardase sin problemas.
Los estilos los añadiremos justo antes de ]]></b:skin>.resumenpost td h3.post-title{margin: 0 !important; padding: 0 !important;}
.resumenpost td h3.post-title{font:14px bold Arial!important;}
Añadí la fuente Arial y de tamaño 14px pero podéis añadir cualquier otro estilo.
¡Muchas gracias, Gem@!
Esto era exactamente lo que quería hacer la otra vez y no supe cómo.
Eres un amor :D
:: Hola Ami, me lo preguntaron hace tiempo así que aquí está :)
:: Ahhh me preguntaste lo de la url del traductor ¿verdad? el enlace que se acorta y está roto ¿sabes de qué hablo?
Hola, Gema:
he estado cambiando en el blog de pruebas y he conseguido hacerlo todo tal como lo explicas en "resumen" de las entradas en las etiquetas.
Ahora me gustaría cambiar las letras, como explicas aquí.
Y va la pregunta del millón: ¿dónde debo colocar este nuevo script?, ¿a continuación del otro y encima del head?
ja,ja, menudo lío.
Besotes y mil gracias.
ah, y otra cosita: los títulos me salen también con la fecha y subrayados, ¿se suprimirá también eso con estos nuevos códigos?
Muchas gracias de nuevo.
:: Hola Anabel :)
Si ya hiciste el primer paso de esta entrada:
http://gemablog-.blogspot.com/2007/01/entradas-en-expandible-para-las.html
no hay que añadir ningún script sino buscar (hay que marcar para expandir la plantilla) esa parte que indico al principio de esta entrada.
<table><tr><td width='40px'>
y esa línea la sustituimos por la siguiente:
<table cellpadding='0' cellspacing='0' class='resumenpost'><tr><td width='40px'>
Guardamos los cambios y luego justo antes de ]]></b:skin>
añadimos esto que sigue:
.resumenpost td h3.post-title{margin: 0 !important; padding: 0 !important;}
.resumenpost td h3.post-title{font:14px bold Arial!important;}
Estos estilos afectan a los títulos, es decir se puede hacer cualquier cambio en los títulos pero no en la fecha.
La fecha la puedes añadir justo debajo de los post como yo la tengo, pero ya sabes que saldrán entonces igual en todos los post.
Puede modificarse eso en plantilla de diseño.
Busca en la parte central donde dice "Entradas del blog" si pinchas en el enlace que dice "Editar" te lleva a una ventana donde puedes marcar todas las cosas que deseas que se vean en el blog.
Allí puedes escoger si mostrar la fecha encima de los títulos o debajo de los post.
En tu blog principal el subrayado no está en los títulos pero si fuera el caso que deseas quitarlo puedes añadir antes de ]]></b:skin> junto a los otros estilos algo así:
.resumenpost td h3.post-title{text-decoration:none !important;}
Cualquier duda me lo dices y si puedo ver el posible problema online mucho mejor ;)
¡Gracias Gem@!
Yo misma hace un tiempo te había preguntado sobre esto y ahora acá está la solución.
Ya lo he probado y me ha funcionado de maravilas :)
Si me decías a mí lo de la url del traductor, la verdad no lo recuerdo, pero sé a lo que te refieres.
En todo caso, ya no importa :P
Gracias de nuevo :D
Hola, Gema, te sigo desde que inicié mi blog y gracias a tí he podido poner bastante cosas en mi blog, sin tener ni idea de informática.
He instalado las entradas en expandible de las categorías, pero no sé si tendrá algo que ver, me ha desaparecido la nube de etiquetas y además cuando le doy a [+/-], no se expande.
No sé si me podrás ayudar, pero gracias de todas formas. Besos.
Mi blog es: http://lacocinitademarisalas.blogspot.com/
:: Mª Carmen repasa los pasos que diste donde se añade el código de color rojo sobre el negro si todo está en su sitio debería desplegar sin problemas, el problema de la nube seguramente está relacionado con el mismo problema pero hay que solucionarlo primero para saberlo.
Si tienes una copia de la plantilla añádela a un blog de pruebas e intenta allí los cambios para evitar otros errores.
Pasito a pasito me ha salido todo en el blog de pruebas. No he podido poner la fecha debajo de los post, pero no importa: está pequeñita y no molesta. El subrayado en realidad es una línea que va debajo de los títulos, pero tampoco queda mal así. He cambiado Arial por Trebuchet.
Y ahora a cruzar los dedos, ja,ja. Que lo voy a hacer en el blog de verdad, donde los títulos están con una imagen pequeña.
Gracias, corazón, por toda tu ayuda. Y espero poder contarte mañana que todo ha salido bien.
Besotes desde Hamburgo.
:: Claro que saldrá bien Anabel pero no te olvides de guardar una copia de la plantilla antes de los cambios ;)
Hola, Gema:
acabo de cambiarlo todo en el blog original. me ha salido bien, je,je, pero.... el título pisa la imagen de la plantita que lo acompaña.
Si tienes un hueco y puedes verlo, te lo agradeceré muchísimo, porque los títulos no se leen bien.
Besotes y ¡feliz día!
Gema!!!, he cambiado el padding a un valor 5 y los títulos ya no pisan la imagen, creo que ya está.
¡Más gracias!
:: Bueno, bueno... Anabel, ha quedado fantástico!! la ramita junto al título ha quedado estupenda justo en su sitio, y la separación también muy bien.
¿Te animas a seguir arreglando cositas? jajajaja ya sé, poco a poco pero como verás ha ganado mucho con este cambio así que ánimo.
¡Hasta la próxima maestra!
Saludos Gema, decidí aplicarle estos cambios al script.
Quisiera saber, ¿Cómo hago para que los enlaces tengan efecto hover?..Muchas gracias por su atención.
Oh y también para que queden más pegaditos.
:: Saludos Angel Luís Gónzalez.
Para que quede más pegadito he estado viendo y eso debe hacerse en los estilos del título de la entrada, hay en su plantilla algo así:
.post {
margin-top:0px;
margin-right:0px;
margin-bottom:30px;
margin-left:0px;
}
pruebe a disminuir un poco en bottom 30 ó añadiendo en su lugar esto:
.post {
margin:0 0 10px;
}
Los enlaces del blog están definidos en body, al principio de la plantilla:
body {
margin:0px;
padding:0px;
background:#ffffff;
color:#000000;
font-size: small;
}
#outer-wrapper {
font:normal normal 99% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif;
}
a {
color:#0000b3;
}
a:hover {
color:#000033;
}
a img {
border-width: 0;
}
esa parte en negrita son los estilos para que los enlaces se muestren de distinta forma al pasar el cursor como ocurre en los enlaces que muestra en las entradas.
» a:link "tal y como lo vemos"
» a:visited "enlace visitado"
» a:active "cuando se está pulsando"
» a:hover "con el cursor encima"
si el efecto hover es para los títulos de las entradas añadimos:
h3.post-title a:hover {
color:#940f04;
font-weight: bold;
text-decoration:none !important;
font-size:200%;
}
con text-decoration:none intentamos suprimir el subrayado si lo queremos dejar en lugar de none ponemos underline.
Saludos Gema me funcionó, quisiera saber como hacer para que ningún enlace salga subrayado
Bueno Gema ya logré eliminar el subrayado de los enlaces.Gracias por su ayuda.
:: Siento llegar tarde pero me alegra esté solucionado :)
Gema no sé porque al actualizar el blog, en la primara entrada el título se ha quedado igual, el efecto hover no sucede.Quisiera por favor me ayude.
:: Debe ser algo pasajero yo si veo el efecto hover en todos los títulos y en el primero también :)
Creo que son los enlaces visitados los que se muestran así.Intentaré corregir el error.
Quisiera saber como puedo mostrar algunos botones de mi página como los suyos de arriba donde están el facebook, twitter,etc.
Si visitas ell blog sabrás cuales son pues son practicamente los mismos, gracias.
:: Para el efecto hocer podemos probar añadiendo una clase a los resumidos con ese efecto:
.resumenpost td h3.post-title a:hover {
color:#cc0000;
font-weight: bold;
text-decoration:none !important;
font-size:100%;
}
Sobre añadir los iconos a las redes sociales como me lo han pedido anteriormente y es extenso para un comentario mejor hago una entrada con la explicación si le parece bien :)
Ok estaré en espera
Añadí eso pero todavía sucede lo mismo.
:: La parte que define los estilos de los enlaces visitados en los títulos de las entradas está en:
h3.post-title a:visited {
color: #000033;
}
como tiene el mismo color del enlace #000033 por eso no se ve ningún cambio.
Gema lo que deseo es que sienpre se muestre el efecto hover en los titulos de las entradas, aunque sean los visitados.
Nota: solo los miembros de este blog pueden publicar comentarios.